<template>
  <div class="basic-box">
    <div class="basic-head">插值</div>
    <div class="basic-div">
      <div>文本</div>
      <div>用双大括号绑定数据：{{ text }}</div>
      <div v-once>使用v-once使数据不会更新：{{ text }}</div>
      <a-button @click="changeData">改变数据</a-button>
    </div>
    <div class="basic-div">
      <div>原始 HTML</div>
      <div>直接使用双大括号为普通文本：{{ rawHtml }}</div>
      <div>使用v-html可解析html：<span v-html="rawHtml"></span></div>
    </div>
    <div class="basic-div">
      <div>Attribute</div>
      <div>v-bind 属性绑定 缩写为 :</div>
      <div :style="styleObject">为style属性绑定值</div>
    </div>
    <div class="basic-div">
      <div>使用 JavaScript 表达式</div>
      <div>在双大括号中可以使用表达式，原来的数据：{{ str }}</div>
      <div>
        使用表达式颠倒后的数据：{{
          str
            .split("")
            .reverse()
            .join("")
        }}
      </div>
    </div>
    <div class="basic-head">指令</div>
    <div class="basic-div">
      <div>动态参数</div>
      <div>
        从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数
      </div>
      <div :[attr]="styleObject">
        :[attr]="styleObject" 等于 :style="styleObject"
      </div>
    </div>
    <div class="basic-div">
      <div>修饰符</div>
      <div>
        修饰符 (modifier) 是以半角句号 .
        指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
      </div>
      <div @click.prevent="onClick">
        .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()
      </div>
    </div>
    <div class="basic-head">计算属性</div>
    <div class="basic-div">
      <div>计算属性的 setter</div>
      <div>
        firstName：{{ firstName }} ， lastName：{{ lastName }} ， fullName：{{
          fullName
        }}
      </div>
      <a-button @click="changeFullName">改变fullName</a-button>
    </div>
    <div class="basic-head">绑定 HTML Class</div>
    <div class="basic-div">
      <div :class="{ active: isActive }">
        active 这个 class 存在与否将取决于isActive的值
      </div>
      <div :class="classObject">
        绑定的数据对象不必内联定义在模板里
      </div>
      <div :class="[isActive ? activeClass : errorClass]">
        根据条件切换列表中的 class，可以用三元表达式
      </div>
      <a-button @click="isActive = !isActive">改变isActive</a-button>
    </div>
    <div class="basic-head">按键修饰符</div>
    <div class="basic-div">
      <a-input
        placeholder="选中后点击回车触发键盘事件"
        v-on:keyup.enter="alert"
        style="width:20%"
      />
    </div>
    <div class="basic-head">在组件上使用 v-model</div>
    <div class="basic-div">
      <div>两个输入框写法等价</div>
      <a-input
        placeholder="两个输入框写法等价"
        v-model="inputData"
        style="width:20%"
      />
      <a-input
        placeholder="两个输入框写法等价"
        :value="inputData"
        @input="inputData = $event.target.value"
        style="width:20%"
      />
      <div>
        在组件中使用v-model，子组件的prop必须名叫value
      </div>
      <child v-model="inputData"></child>
    </div>
    <div class="basic-head">动态组件</div>
    <div class="basic-div">
      <div>使用is来实现</div>
      <a-button @click="activeComponent = 'child'">切换到组件1</a-button>
      <a-button @click="activeComponent = 'child2'">切换到组件2</a-button>
      <a-button @click="activeComponent = 'child3'">切换到组件3</a-button>
      <component :is="activeComponent" v-model="inputData"></component>
    </div>
  </div>
</template>

<script>
import child from "./components/child";
import child2 from "./components/child2";
import child3 from "./components/child3";
export default {
  name: "basic",
  components: { child, child2, child3 },
  data() {
    return {
      text: 1,
      rawHtml: '<span style="color: red">红的</span>',
      styleObject: {
        color: "red"
      },
      str: "123456789",
      attr: "style",
      firstName: "Foo",
      lastName: "Bar",
      isActive: true,
      classObject: { active: true },
      activeClass: "active",
      errorClass: "err",
      inputData: "",
      activeComponent: "child"
    };
  },
  computed: {
    fullName: {
      // getter
      get: function() {
        return this.firstName + " " + this.lastName;
      },
      // setter
      set: function(newValue) {
        var names = newValue.split(" ");
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  },
  methods: {
    changeData() {
      this.text += 1;
    },
    onClick() {
      console.log("点击了");
    },
    changeFullName() {
      this.fullName = "John Doe";
    },
    alert() {
      this.$message.success("键盘事件");
    }
  }
};
</script>

<style lang="less" scoped>
.basic-box {
  padding: 20px;
  text-align: center;
  font-size: 18px;
  .basic-head {
    text-align: center;
    font-size: 20px;
  }
  .basic-div {
    margin: 10px;
    color: #758a99;
    background: #e3f9fd;
    line-height: 30px;
    padding: 15px;
  }
}
.active {
  color: aqua;
}
.err {
  color: red;
}
</style>
